<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
<header>
  <div class="wrapper">
    <HelloWorld msg="You did it!" />
    <div class="bg-red">HHHH</div>
    <div class="flex bg-">
      <div class="bg-white text-blue-8">1H2HHH</div>
      <div class="bg-red">HHHH</div>
    </div>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </div>
</header>
<RouterView />
</template>

<style scoped>
@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }
}
</style>
